<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Static Top Navbar Example for Bootstrap</title>

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="./js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<style>
		@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

		html {
		  border-top: 5px solid #fff;
		  background: #58DDAF;
		  color: #2a2a2a;
		}

		html, body {
		  margin: 0;
		  padding: 0;
		  font-family: 'Open Sans';
		}

		h1 {
		  color: #fff;
		  text-align: center;
		  font-weight: 300;
		}

		#slider {
		  position: relative;
		  overflow: hidden;
		  margin: 20px auto 0 auto;
		  border-radius: 4px;
		}

		#slider ul {
		  position: relative;
		  margin: 0;
		  padding: 0;
		  height: 200px;
		  list-style: none;
		}

		#slider ul li {
		  position: relative;
		  display: block;
		  float: left;
		  margin: 0;
		  padding: 0;
		  width: 500px;
		  height: 300px;
		  background: #ccc;
		  text-align: center;
		  line-height: 300px;
		}

		a.control_prev, a.control_next {
		  position: absolute;
		  top: 40%;
		  z-index: 999;
		  display: block;
		  padding: 4% 3%;
		  width: auto;
		  height: auto;
		  background: #2a2a2a;
		  color: #fff;
		  text-decoration: none;
		  font-weight: 600;
		  font-size: 18px;
		  opacity: 0.8;
		  cursor: pointer;
		}

		a.control_prev:hover, a.control_next:hover {
		  opacity: 1;
		  -webkit-transition: all 0.2s ease;
		}

		a.control_prev {
		  border-radius: 0 2px 2px 0;
		}

		a.control_next {
		  right: 0;
		  border-radius: 2px 0 0 2px;
		}

		.slider_option {
		  position: relative;
		  margin: 10px auto;
		  width: 160px;
		  font-size: 18px;
		}

	</style>
  </head>

  <body>

		<div id="slider">
		  <a href="#" class="control_next">>></a>
		  <a href="#" class="control_prev"><</a>
		  <ul>
			<li>SLIDE 1</li>
			<li>SLIDE 2</li>
		  </ul>  
		</div>

	<script src="./js/jquery.min.js"></script>
	<script>
	
		jQuery(document).ready(function ($) {

		  $('#checkbox').change(function(){
			setInterval(function () {
				moveRight();
			}, 3000);
		  });
		  
			var slideCount = $('#slider ul li').length;
			var slideWidth = $('#slider ul li').width();
			var slideHeight = $('#slider ul li').height();
			var sliderUlWidth = slideCount * slideWidth;
			
			$('#slider').css({ width: slideWidth, height: slideHeight });
			
			$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
			
			$('#slider ul li:last-child').prependTo('#slider ul');

			function moveLeft() {
				$('#slider ul').animate({
					left: + slideWidth
				}, 200, function () {
					$('#slider ul li:last-child').prependTo('#slider ul');
					$('#slider ul').css('left', '');
				});
			};

			function moveRight() {
				$('#slider ul').animate({
					left: - slideWidth
				}, 200, function () {
					$('#slider ul li:first-child').appendTo('#slider ul');
					$('#slider ul').css('left', '');
				});
			};

			$('a.control_prev').click(function () {
				moveLeft();
			});

			$('a.control_next').click(function () {
				moveRight();
			});

		});    
	</script>
  </body>
</html>